<template lang="pug">
  div.table-empty
    s-table(
    ref="table"
    :dataPops="tableData"
    reqMethod="get"
    :column="tableObj.column"
    :show-summary="true"
    v-if="$route.path === '/finance/charge/record'"
    :filterProps="{ fields: searchField }"
    @filterHandle="filterHandle"
    :selection="false"
    @selection-change="rows => selectedRows = rows"
    )
      .table-operator(slot="table-operator")
        el-button(size="large" :loading="loading" :disabled="selectedRows.length > 0" round @click="printHandle()") 导出
      template(slot="action" slot-scope="text, scope")
        el-link(@click="actionHandle(scope.payOrderId, 'view')" type="primary") 详情
      template(slot="paiedTime" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD HH:mm:ss')}}
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD HH:mm:ss')}}
    router-view(v-else)
    info-drawer(:visible.sync="modalObj.visible" :id="modalObj.id" :type="modalObj.type")
</template>
<script>
import { column } from './config'
import { mapGetters } from 'vuex'
import { getClassesByArea } from '@/api/common'
import { getRecordList, recordExport } from './api'
import { getMonthFirst, getMonthLast } from '@/utils/date'
import InfoDrawer from '@/views/finance/charge/plan/infoDrawer'

export default {
  name: 'FinanceChargeRecord',
  components: {
    InfoDrawer
  },
  data () {
    return {
      tableObj: {
        column
      },
      tableData: [],
      selectedRows: [],
      classes: [],
      classId: '',
      childName: '',
      createdL: getMonthFirst(new Date()),
      createdR: getMonthLast(new Date()),

      loading: false,

      modalObj: {
        visible: false
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    reqUrl () {
      return '/crm/fin/record/list'
    },
    searchField () {
      const { createdL, createdR } = this
      return [
        {
          key: 'fd',
          label: '日期',
          type: 'daterange',
          key1: 'createdL',
          key2: 'createdR',
          initialValue: [createdL, createdR],
          fieldProps: {
            clearable: false
          }
        },
        {
          key: 'classId',
          label: '班级名称',
          type: 'select',
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          },
          events: {
            change: val => this.classChange(val)
          }
        },
        {
          key: 'childName',
          label: '学生姓名',
          events: {
            input: val => this.inputChange(val)
          }
        }
      ]
    }
  },
  created () {
    this.getClasses()
    this.getList()
  },
  methods: {
    getList () {
      const { classId, childName, createdL, createdR } = this
      getRecordList({ payStatus: 2, classId, childName, createdL, createdR }).then(res => {
        console.log(res)
        const list = res.content
        this.tableData = list.map(x => {
          const transactionId = x.payResult?.transactionId
          return {
            id: x.id,
            className: x.className,
            childName: x.payOrder.childName,
            title: x.payOrder.title,
            orderSn: x.payOrder.orderSn,
            totalAmount: x.payOrder.totalAmount,
            planName: x.payOrder.planName,
            created: x.payOrder.created,
            createdByName: x.payOrder.createdByName,
            transactionId: `${transactionId}-`,
            paiedTime: x.payOrder.paiedTime,
            payOrderId: x.payOrderId
          }
        })
        console.log(this.tableData)
      })
    },

    actionHandle (id, type) {
      console.log(id)
      if (type === 'view') {
        this.modalObj = {
          visible: true,
          id: id,
          type: 'order'
        }
      }
    },

    filterHandle (values) {
      console.log(values)
      this.createdL = values.createdL
      this.createdR = values.createdR
      this.getList()
    },
    classChange (res) {
      console.log(res)
      this.classId = res
    },
    inputChange (value) {
      console.log(value)
      this.childName = value
    },
    printHandle () {
      const { classId, childName } = this
      this.loading = true
      recordExport({ payStatus: 2, classId, childName }).then(res => {
        window.location.href = res
      }).finally(o => {
        this.loading = false
      })
    },
    // 获取班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
    }
  }
}
</script>
<style lang="scss" scoped>
  .table-operator{
    margin-bottom: 18px
  }
  ::v-deep{
    .tableWrapper{
      padding: 0
    }
  }
</style>
